<script setup lang="ts">

import { usePaging } from '@/hooks/pagination';
const { queryParams, setQueryParms, loadData, total } = usePaging()
setQueryParms({
  mainGuaranteeWay: "0",
  productName: "",
  serviceAreaCode: "",
  loanTerm: "",
  loanLimit: "",
  auditMode: "",
  isRate: "",
  isHot: ""
})
const router = useRouter();
function handleDetail(id: string) {
  router.push({ path: `/financial-products/${id}` });
}
import type { Product as projectType } from '@/types/product';

const serverAreaList = ref([])
onMounted(() => {
  getData()
  getRegionById('1288747992316125187').then(res => {
    serverAreaList.value = res.data
  })
})
// 获取字典数据
import { useDict } from '@/hooks/dict';

const { loan_limit: loanLimit, loan_term: loanTerm, productMainGuaranteeType: guaranteeType, productApproveMode: approvalType } = useDict("loan_term", "service_area", "productApproveMode", "loan_limit", "productMainGuaranteeType")

// 获取产品详情
import { getProductList } from '@/api/product';
import { getRegionById } from '@/api/dict';

const productList = ref<projectType>();
function getData() {
  loadData(getProductList).then(res => {
    productList.value = res.rows
  })
}
function handleSearch() {
  getData()
}


const sortOptions = ref([{
  title: "综合排序"
}, {
  title: "按热度"
}, {
  title: "按利率"
}])
const sortIndex = ref(0)
watch(sortIndex, (v) => {
  queryParams.isHot = ''
  queryParams.isRate = ''

  if (v === 1) {
    queryParams.isHot = '1'
  }

  if (v === 2) {
    queryParams.isRate = '1'
  }

  getData()
})

defineOptions({
  name: 'ProductView'
});
</script>
<template>
  <div class="h-main pt-7" style="background-color: #F7F8FC;">
    <div class="w-1200 m-auto ">
      <div class="search-wrapper">
        <div class="search-input-box"><input type="text" v-model="queryParams.productName"  @keydown.enter="handleSearch" placeholder="请输入搜索关键字">
        </div>
        <div class="search-button" @click="handleSearch">按结果搜索</div>
        <div class="aisearch-button-wrapper">
          <img
            src=""
            alt="ai">
          <!-- <div class="aisearch-button-text">智能匹配</div> -->
        </div>
      </div>
      <ul class="market-header-ul mt-5.2">
        <li class="py-2.5 leading-5.5 flex items-center">
          <span class="text-3.5 col3 translate-y-1.1 self-start whitespace-nowrap">服务地区：</span>
          <div class="inline-block">
            <div class="pos-rela">
              <el-radio-group v-model="queryParams.serviceAreaCode" @change="getData" size="small">
                <el-radio-button label="不限" value="" />
                <el-radio-button v-for="(item, i) in serverAreaList" :key="i" :label="item.regionName"
                  :value="item.regionCode" />
              </el-radio-group>
            </div>
          </div>
        </li>
        <li class="py-2.5 leading-5.5 flex items-center">
          <span class="text-3.5 col3 whitespace-nowrap">担保方式：</span>
          <div class="inline-block">
            <div class="pos-rela">
              <el-radio-group v-model="queryParams.mainGuaranteeWay" @change="getData" size="small">
                <el-radio-button v-for="(item, i) in guaranteeType" :key="i" :label="item.label" :value="item.value" />
              </el-radio-group>
            </div>
          </div>
        </li>
        <li class="py-2.5 leading-5.5 flex items-center">
          <span class="text-3.5 col3 whitespace-nowrap">审批模式：</span>
          <div class="inline-block">
            <div class="pos-rela">
              <el-radio-group v-model="queryParams.auditMode" @change="getData" size="small">
                <el-radio-button label="不限" value="" />
                <el-radio-button v-for="(item, i) in approvalType" :key="i" :label="item.label" :value="item.value" />
              </el-radio-group>
            </div>
          </div>
        </li>
        <li class="py-2.5 leading-5.5 flex items-center">
          <span class="text-3.5 col3 whitespace-nowrap">贷款期限：</span>
          <div class="inline-block">
            <div class="pos-rela">
              <el-radio-group v-model="queryParams.loanTerm" @change="getData" size="small">
                <el-radio-button label="不限" value="" />
                <el-radio-button v-for="(item, i) in loanTerm" :key="i" :label="item.label" :value="item.value" />
              </el-radio-group>
            </div>
          </div>
        </li>
        <li class="py-2.5 leading-5.5 flex items-center">
          <span class="text-3.5 col3 whitespace-nowrap">贷款额度：</span>
          <div class="inline-block">
            <div class="pos-rela">
              <el-radio-group v-model="queryParams.loanLimit" @change="getData" size="small">
                <el-radio-button label="不限" value="" />
                <el-radio-button v-for="(item, i) in loanLimit" :key="i" :label="item.label" :value="item.value" />
              </el-radio-group>
            </div>
          </div>
        </li>
      </ul>
      <p class="col9 text-3.25">
        搜索到<span class="color-red">{{ total }}</span>个结果
      </p>


      <div>
        <ul class="flex text-4 items-center mt-5 gap-5">
          <li class="fl cursor-pointer" v-for="(item, i) in sortOptions" :key="i" @click="sortIndex = i"
            :class="{ 'text-[#0051ff]': sortIndex === i }">
            {{ item.title }}
          </li>
        </ul>

        <div class="market-content-content mt-12 flex flex-wrap gap-10">
          <Product v-for="(item, i) in productList" :key="i" :item="item" @click="handleDetail(item.id)"></Product>
        </div>
        <div class="mt-15 pb-20 flex justify-center">
          <el-pagination background layout="prev, pager, next" v-model:current-page="queryParams.pageNum"
            @change="getData" v-model:page-size="queryParams.pageSize" :total="total" />
        </div>
      </div>
    </div>

  </div>
</template>
<style lang="scss" scoped>
:deep(.el-radio-button__inner) {
  border: 0 !important;
  background-color: transparent;
  border-radius: 3px !important;
  border-left: 0;
  color: #333;
}

.market-content-content {}

.search-wrapper {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;

  .search-button {
    padding: 0 15px;
    height: 50px;
    line-height: 50px;
    background: #4d86ff;
    color: #fff;
    font-size: 14px;
    border: 1px solid #4d86ff;
    cursor: pointer;
  }

  .aisearch-button-wrapper {
    img {
      width: 20px;
      height: 20px;
    }

    .aisearch-button-text {
      margin-left: 10px;
      color: #fff;
      font-size: 14px;
    }

    margin-left: 10px;
    padding: 0 15px;
    height: 50px;

    display: flex;
    align-items: center;

    justify-content: center;
    background: -webkit-gradient(linear, left top, right top, from(#ffc976), to(#ff5778));
    background: linear-gradient(90deg, #ffc976, #ff5778);
    cursor: pointer;
  }

  .search-input-box {
    height: 50px;
    border: 1px solid #ccc;
    border-right: none;

    input {
      margin-left: 15px;
      width: 600px;
      height: 50px;
      background: transparent;
      color: #333;
      font-size: 14px;
      outline: none;
    }
  }
}
</style>
